<template>
  <div style="padding: 0 17px">
    <Breadcrumb/>
    <div style="display: flex;margin-top: 20px">
      <el-button-group style="margin-right: 15px">
<!--        <el-button icon="Delete" type="danger" @click="deleteSelect">删除所选-->
<!--        </el-button>-->
      </el-button-group>
      <span style="min-width: 200px;margin-right: 15px">
          <OrganizationTree
              @change="load"
              @tree-select-changed="treeSelectChanged"
              v-model="selectedOrganizationId"
          />
        </span>
      <div style="width: 350px;display: flex">
      <el-date-picker
          style="width: 250px;margin-right: 15px"
          v-model="searchData"
          type="daterange"
          range-separator="到"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
      />
      </div>
      <el-input v-model="search" placeholder="单位名称/设备编号"
                style="width: 200px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>

      <el-button icon="Search" type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
      </el-button>
      <el-button type="success" style="" @click="importData">导入</el-button>
      <el-button type="success" style="" @click="exportData">导出</el-button>
    </div>
    <div>
      <el-table :data="tableData" :row-style="{ height: '77px' }" border style="width: calc(100vw - 240px);margin-top: 20px;height: 70vh;color: #909399;font-size: 15px;" @selection-change="handleSelectionChange">
        <!--<el-table-column-->
                <!--type="selection"-->
                <!--width="55">-->
        <!--</el-table-column>-->
          <el-table-column prop="id" label="ID" width="100"/>
        <el-table-column prop="clientName" label="单位名称" width="250"/>
        <el-table-column prop="equuipmentNo" label="设备编号" width="150"/>
        <el-table-column prop="systemType" label="系统类型" width="150"/>
        <el-table-column prop="systemAddress" label="系统地址" width="200"/>
        <el-table-column prop="operateType" label="操作类型" width="100"/>
        <el-table-column prop="operateName" label="操作人" width="100"/>
        <el-table-column prop="dataTime" label="上传时间" width="200"/>
        <el-table-column prop="content" label="内容"/>
<!--        <el-table-column align="center" label="操作" fixed="right">-->
<!--          <template v-slot="scope">-->
<!--            <el-button type="danger" size="small" icon="Delete" @click="deleteItem(scope.row.id)">删除</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>

      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :background="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <el-dialog title="导入" v-model="dialogImportVisible" width="520px">
    <el-form label-position="right" label-width="100px">
      <el-form-item label="模板下载:" padding-top:10px>
        <el-button type="primary" size="small" style="" @click="exportTemplate">设施操作记录</el-button>
      </el-form-item>
      <el-form-item label="文件" padding-top:-20px>
        <el-upload :headers="headers"
                           :multiple="false"
                   :on-success="onUploadSuccess"
                   :on-error="onUploadError"
                   :action="serverIp+'/record-equipment-operate/importData'"
                   class="upload-demo">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogImportVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from "@/utils/request.js";
import Breadcrumb from "@/components/Breadcrumb.vue";
import OrganizationTree from "@/components/OrganizationTree.vue";
import {serverIp} from "../../../public/static/config"
export default {
  name: "recordEquipmentOperate",
  components: {OrganizationTree, Breadcrumb},
  data() {
    return{
      serverIp,
                headers: {
                    token:  JSON.parse(localStorage.getItem('user')).token,
                },
      dialogImportVisible: false,
      operationItemDialog: false,
      tableData:[],
      search:"",
      selectedOrganizationId: JSON.parse(localStorage.getItem("user")).organization,
      currentData: {},
      searchData:'',
      form:{},
      currentPage: 1,
      pageSize: 10,
      total: 10,
    }
  },
  created() {
    this.load()
  },
  methods: {
    importData() {
      this.dialogImportVisible = true;
    },
    onUploadSuccess() {
      this.$message.success('上传成功');
      this.dialogImportVisible = false;
      location.reload();
    },
    onUploadError(){
      this.$message.error('上传失败');
    },
    // 模板下载
    exportTemplate() {
      window.location.href = '../xlsx/recordEquipmentOperate.xlsx'
    },
    exportData() {
      let level = JSON.parse(localStorage.getItem("user")).level
      if (this.currentData.level !== undefined) {
        level = this.currentData.level
      }
      let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
      } else {
        clientIds = [];
      }
      let startTime="", endTime=""
      if (this.searchData!==null&&this.searchData.length!==0){
        startTime=this.searchData[0]
        endTime=this.searchData[1]
      }
      window.open(serverIp + '/record-equipment-operate/export?keyWord=' + this.search +"&startTime="+startTime+"&endTime="+endTime+
              "&level="+level+"&organizationId="+this.selectedOrganizationId+"&isAllClient="+isAllClient+"&clientIds="+clientIds);
    },
    handleSizeChange(pageSize) {   // 改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {  // 改变当前页码触发
      this.currentPage = pageNum
      this.load()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    /*
    // 删除
    deleteItem(scope){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.get("/record-equipment-operate/delete/"+scope).then(res=>{
          if (res.code==='200'){
            this.$message.success("成功")
            this.load()
          }else {
            this.$message.error("删除失败，"+res.msg)
          }
        })
      });
    },
    deleteSelect(){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.multipleSelection.length===0){
          this.$message.error("未选择数据")
          return
        }
        const idList=[];
        this.multipleSelection.forEach(row => {
          idList.push(row.id)
        });
        request.post("/record-equipment-operate/deleteByIdList",idList).then(res=>{
          if (res.code==='200'){
            if (res.data){
              this.$message.success("成功")
            }else {
              this.$message.error("删除失败")
            }
            this.load()
          }else {
            this.$message.error("删除失败，"+res.msg)
          }
        })
      });
    },

     */
    load(){
      let level = JSON.parse(localStorage.getItem("user")).level
      if (this.currentData.level !== undefined) {
        level = this.currentData.level
      }
      let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
      } else {
        clientIds = [];
      }
      let startTime="", endTime=""
      if (this.searchData!==null&&this.searchData.length!==0){
        startTime=this.searchData[0]
        endTime=this.searchData[1]
      }
      request.get("/record-equipment-operate/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize+"&keyWord="+this.search+"&startTime="+startTime+"&endTime="+endTime+
              "&level="+level+"&organizationId="+this.selectedOrganizationId+"&isAllClient="+isAllClient+"&clientIds="+clientIds).then(res => {
        if (res.code === '200') {
          for (let key in res.data) {
            if (key === "record") {
              this.tableData = res.data[key];
            } else if (key === "total") {
              this.total = res.data[key];
            }
          }
        } else {
          this.$message.error("错误"+res.msg)
        }
      })
    },
    treeSelectChanged(data, node) {
      this.currentData = data
    },
  }
}
</script>

<style scoped>
:deep(.el-table th .cell)  {
  font-weight: 700
}
:deep(.el-form-item__label) {
  font-size: 14px;
  font-weight: 700
}
.input-size {
  font-size: 13px;
}
</style>
